// 定义路由
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

// 重复点击路由报错问题
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};

// 引入路由权限接口请求函数
import { pressApi } from "@/utils/https";
// 引入store 实例对象,来操作对应的store 上的方法
import store from "@/store";

const routes = [
  {
    path: "/",
    redirect: "/layout", // 重定向:重新指向其它path,会改变网址
  },
  {
    path: "/layout",
    component: () => import("@/views/layout/Layout.vue"),
    children: [
      {
        path: "",
        component: () => import("@/views/layout/home/Home.vue"),
        meta: {
          title: "首页",
          icon: "el-icon-s-grid",
        },
        name: "Home",
      },
      {
        path: "user",
        component: () => import("@/views/layout/user/User.vue"),
        meta: {
          title: "用户管理",
          icon: "el-icon-user",
        },
        name: "User",
      },
      {
        path: "info",
        component: () => import("@/views/layout/info/Infomanage.vue"),
        meta: {
          title: "信息管理",
          icon: "el-icon-folder-opened",
        },
        name: "Info",
        children: [
          {
            path: "",
            component: () => import("@/views/layout/info/Myinfo.vue"),
            meta: {
              title: "个人信息",
              icon: "el-icon-document",
            },
            name: "Myinfo",
          },
        ],
      },
    ],
  },
  {
    path: "/login",
    component: () => import("@/views/login/Login.vue"),
  },
];

// 创建路由实例对象
const router = new VueRouter({
  mode: "history",
  routes: routes,
});

// 设置路由全局前置守卫
import { getCookie } from "@/utils/cookie.js";
router.beforeEach((to, from, next) => {
  // 获取token
  let token = getCookie("token");
  // next();
  // console.log(token);
  if (token) {
    // 已经登录过了
    // 请求左侧菜单栏接口数据
    if (to.path == "/login") {
      // 当手动修改url跳转到登录页时,此时token存在,直接跳回到首页
      next("/");
    } else {
      let role = localStorage.getItem("role");
      if (store.state.routes.length == 0) {
        pressApi({ role: role }).then((res) => {
          // console.log(res);
          res.data.forEach((item) => {
            // console.log(item);
            item.component = () =>
              import(`@/views/layout/vaction/${item.name}.vue`);
            routes[1].children.push(item);
          });
          // console.log(routes); // 最新更新完的routes
          // console.log(router); // router 已经new完的路由对象
          // 解决新增的路由菜单点击出现白屏问题,因为new VueRouter()之前已经执行过了
          // 此步骤相当于重新new VueRouter(更新后的routes) 相当于发糖
          router.addRoutes(routes);
          // console.log(1);
          // 将请求后的更新完的routes 存到vuex中,然后方便首页左侧aside组件左侧菜单展示
          // console.log(store);
          store.dispatch("setRoutesAsync", routes);
          // console.log(store);
          // 刷新路由 防止新addRoutes(routes)的路由没有完全加载完( 即add完 ) 导致的页面白屏问题,找不到页面问题
          next({ ...to, replace: true });
        });
      } else {
        next();
      }
    }
  } else if (!token && to.path != "/login") {
    next("/login");
  } else {
    next();
  }
});

export default router;
